<template>
<Select v-if="$attrs.multiple" ref="users" clearable v-model="users" filterable remote label-in-value :remote-method="queryChange" :loading="loading1" v-bind="$attrs" v-on="$listeners" @on-select="onSelect" :placeholder="placeholder">
    <Option v-for="(option, index) in options" :value="option.value" :label="option.label" :key="option.value">
        <span>{{option.label}}</span>
        <span style="float:right;color:#ccc">{{option.account}}</span>
    </Option>
</Select>
<Select v-else ref="users" clearable v-model="user" filterable remote label-in-value :remote-method="queryChange" :loading="loading1" v-bind="$attrs" v-on="$listeners" @on-select="onSelect" :placeholder="placeholder">
    <Option v-for="(option, index) in options" :value="option.value" :label="option.label" :key="option.value">
        <span>{{option.label}}</span>
        <span style="float:right;color:#ccc">{{option.account}}</span>
    </Option>
</Select>
</template>

<script>
import {
    debounce,
    typeOf
} from "../utils/tool"

export default {
    model: {
        prop: 'value',
        event: 'returnValue'
    },
    props: {
        value: {
            type: [String, Number, Object, Array]
        },
        fullname: {
            type: [String]
        },
        kind: {
            type: [String],
            default: ""
        }
    },
    data() {
        return {
            user: "",
            users: [],
            loading1: false,
            options: [],
            selected: [],
            placeholder: "请输入姓名查询",
        }
    },
    watch: {
        value: async function (newval, oldval) {
            if (this.$attrs.multiple) {
                this.users = newval
            } else {
                this.user = newval;
            }

            if (this.user == "" && this.users.length <= 0) {
                this.$refs.users.clearSingleSelect()
                this.selected = []
                this.options = []
            } else if(this.options.length == 0){
                await this.loadData(newval)
            }
        }
    },
    methods: {
        queryChange: debounce(async function (query) {
            if (query !== "") {
                this.loading1 = true

                let res = await this.$api.user.userFilter({
                    fullname: query,
                    rolename: this.kind
                });

                res.rows.map(user => {
                    user.value = user.userid
                    user.label = user.fullname
                })
                let selectedUser = JSON.parse(JSON.stringify(this.selected))
                this.options = this.unrepeat([...selectedUser, ...res.rows])

                this.loading1 = false
            } else {
                this.$refs.users.clearSingleSelect()
            }
        }, 500),
        async loadData(ids) {
            let _ids = typeOf(ids) == "array" ? ids.join(",") : ids

            let res = await this.$api.user.userFilter({
                userids: _ids
            });

            res.rows.map(user => {
                user.value = user.userid
                user.label = user.fullname
            })

            this.options.push(...res.rows)
            this.selected.push(...res.rows)
        },
        onSelect(selectedUsers, data) {
            if (this.$attrs.multiple) {
                let index = this.selected.findIndex(user => user.value == selectedUsers.value)
                if (index < 0) {
                    let su = this.options.find(user => user.value == selectedUsers.value)
                    this.selected.push(su)
                } else {
                    this.selected.splice(index, 1)
                }

                this.$emit("on-option-select", this.selected)
            } else {
                this.$emit("on-option-select", selectedUsers)
            }
        },
        //去除重复
        unrepeat(arr) {
            let map = new Map();
            for (let item of arr) {
                if (!map.has(item.userid)) {
                    map.set(item.userid, item);
                }
            }

            return [...map.values()];

        }
    }
};
</script>
